<template>
 <div class="countDialog">
    <el-card class="elcard" style="width:65%;height:130px" v-show="checkedList.length">
      <el-row type="flex" justify="space-between">
        <el-col>
          <p>已选:  <span v-for="item in checkedList" :key="item.cid">{{item.cname}}、</span></p>
        </el-col>
        <el-col :span="6">
           <el-button @click="reset">重新选择</el-button>
           <el-button type="primary" @click="start">开始练习</el-button>
        </el-col>
      </el-row>
    </el-card>

 </div>
</template>

<script>
export default {
  name: '',
  props: {
    checkedList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      pageList: this.checkedList
    }
  },
  components: {

  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleClose () {
      this.showDialog = false
    },
    // 重新选择
    reset () {
      this.$emit('updateList')
    },
    // 开始练习
    start () {
      this.$router.push({ name: 'pagelist', params: { list: this.checkedList } }).catch(err => {
        console.log('输出报错', err)
      })
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
  .countDialog{
    position: fixed !important;
    width: 99%;
    bottom: 0;
    z-index: 999;
    .elcard{
      background-color: rgb(236, 251, 255);
      border: 1px solid rgb(14, 86, 153);
    }
  }
</style>
